<.simple_form
  :let={f}
  for={@changeset}
  action={@action}
  method={@method}
  x-data="{ advancedMode: !!JSON.parse(localStorage.getItem('advancedMode')) }"
  x-init="$watch('advancedMode', value => localStorage.setItem('advancedMode', JSON.stringify(value)))"
>
  <.error :if={@changeset.action}>
    Oops, something went wrong! Please check the errors below.
  </.error>

  <section x-data="{ selectedPreset: null }">
    <h3 class="my-4 text-2xl text-black dark:text-white">
      Use a Preset
    </h3>
    <section x-data="{ selection: null }">
      <.input
        prompt="Select preset"
        name="media_profile_preset"
        value=""
        options={preset_options()}
        type="select"
        x-model="selection"
        inputclass="w-full"
        help="You can further customize the settings after selecting a preset. This is just a starting point"
      >
        <.button
          class="h-13 w-2/5 lg:w-1/5 ml-2 md:ml-4"
          rounding="rounded"
          type="button"
          x-on:click="selectedPreset = selection; selection = null"
          x-bind:disabled="!selection"
        >
          <span x-text="selection ? 'Load' : 'Select'">Select</span><span class="hidden lg:inline ml-1">Preset</span>
        </.button>
      </.input>
    </section>

    <section class="flex justify-between items-center mt-8">
      <h3 class="text-2xl text-white">
        General Options
      </h3>
      <span class="cursor-pointer hover:underline" x-on:click="advancedMode = !advancedMode">
        Editing Mode: <span x-text="advancedMode ? 'Advanced' : 'Standard'"></span>
      </span>
    </section>
    <section x-data="{ 
        presets: { 
          default: 'Default',
          media_center: 'TV Shows',
          audio: 'Music',
          archiving: 'Archiving'
        }
    }">
      <.input
        field={f[:name]}
        type="text"
        label="Name"
        placeholder="New Profile"
        help="Something descriptive. Does not impact indexing or downloading (required)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-data={"{ 
        presets: { 
          default: '#{default_output_template()}',
          media_center: '#{media_center_output_template()}',
          audio: '#{audio_output_template()}',
          archiving: '#{default_output_template()}'
        }
    }"}>
      <.input
        field={f[:output_path_template]}
        type="text"
        inputclass="font-mono"
        label="Output path template"
        help="Must end with .{{ ext }}. See below for more details. The default is good for most cases (required)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Subtitle Options
    </h3>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_subs]}
        type="toggle"
        label="Download Subtitles"
        help="Downloads subtitle files alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:embed_subs]}
        type="toggle"
        label="Embed Subtitles"
        help="Downloads and embeds subtitles in the media file itself, if supported. Uneffected by 'Download Subtitles'"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: false, media_center: false, audio: false, archiving: false } }">
      <.input
        field={f[:download_auto_subs]}
        type="toggle"
        label="Use Autogenerated Subtitles"
        help="Prefers normal subs with 'Download Subtitles' or 'Embed Subtitles' but will use autogenerated subs if needed."
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: 'en', media_center: 'en', audio: '', archiving: 'all' } }">
      <.input
        field={f[:sub_langs]}
        type="text"
        label="Subtitle Languages"
        help="Use commas for multiple languages (eg: en,de)"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-show="advancedMode">
      <.input
        field={f[:audio_track]}
        placeholder="de"
        type="text"
        label="Audio Track Language"
        help="Only works if there are multiple audio tracks. Use either a language code, 'original' for the original audio track, or 'default' for YouTube's preference. Or just leave it blank"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Thumbnail Options
    </h3>

    <section x-data="{ presets: { default: true, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_thumbnail]}
        type="toggle"
        label="Download Thumbnail"
        help="Downloads thumbnail alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: true, archiving: true } }">
      <.input
        field={f[:embed_thumbnail]}
        type="toggle"
        label="Embed Thumbnail"
        help="Downloads and embeds thumbnail in the media file itself, if supported. Uneffected by 'Download Thumbnail' (recommended)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Metadata Options
    </h3>

    <section x-data="{ presets: { default: false, media_center: false, audio: false, archiving: true } }">
      <.input
        field={f[:download_metadata]}
        type="toggle"
        label="Download Metadata"
        help="Downloads metadata file alongside media file"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: true, media_center: true, audio: true, archiving: true } }">
      <.input
        field={f[:embed_metadata]}
        type="toggle"
        label="Embed Metadata"
        help="Downloads and embeds metadata in the media file itself, if supported. Uneffected by 'Download Metadata' (recommended)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Release Format Options
    </h3>

    <section x-data="{ presets: { default: 'include', media_center: 'exclude', audio: 'exclude', archiving: 'include' } }">
      <.input
        field={f[:shorts_behaviour]}
        options={friendly_format_type_options()}
        type="select"
        label="Include Shorts"
        help="Experimental. Please report any issues on GitHub"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: 'exclude', media_center: 'exclude', audio: 'exclude', archiving: 'include' } }">
      <.input
        field={f[:livestream_behaviour]}
        options={friendly_format_type_options()}
        type="select"
        label="Include Livestreams"
        help="How to handle past livestreams"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      Quality Options
    </h3>

    <section x-data="{ presets: { default: '1080p', media_center: '1080p', audio: 'audio', archiving: '2160p' } }">
      <.input
        field={f[:preferred_resolution]}
        options={friendly_resolution_options()}
        type="select"
        label="Preferred Resolution"
        help="Will grab the closest available resolution if your preferred is not available. 'Audio Only' grabs the highest quality m4a"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <section x-show="advancedMode">
      <.input
        field={f[:media_container]}
        type="text"
        label="Media Container"
        placeholder="mp4"
        help="Don't change this if you're going to consume media via Plex. Leave blank for default"
      />
    </section>

    <section x-data="{ presets: { default: null, media_center: 1, audio: null, archiving: 1 } }">
      <.input
        field={f[:redownload_delay_days]}
        type="number"
        label="Redownload Delay (days)"
        min="0"
        help="Delay in days until new media is redownloaded. Redownloading new media can improve its quality or SponsorBlock tags. Leave blank to not redownload"
        x-init="$watch('selectedPreset', p => p && ($el.value = presets[p]))"
      />
    </section>

    <h3 class="mt-8 text-2xl text-black dark:text-white">
      Media Center Options
    </h3>
    <p class="text-sm mt-2 max-w-prose">
      Everything in this section is experimental - please open a GitHub issue if you see something odd.
      <strong>
        These options only work if this Media Profile's output template is set to split media into seasons.
      </strong>
      Try the "Media Center" preset if you're not sure.
    </p>

    <section
      phx-click={show_modal("upgrade-modal")}
      x-data="{ presets: { default: false, media_center: true, audio: false, archiving: false } }"
    >
      <.input
        field={f[:download_nfo]}
        type="toggle"
        label="Download NFO data"
        label_suffix="(pro)"
        help="Downloads NFO data alongside media file for use with Jellyfin, Kodi, etc."
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <section x-data="{ presets: { default: false, media_center: true, audio: false, archiving: true } }">
      <.input
        field={f[:download_source_images]}
        type="toggle"
        label="Download Series Images"
        help="Downloads poster and banner images for use with Plex, Jellyfin, Kodi, etc. Only works for full channels (not playlists)"
        x-init="$watch('selectedPreset', p => p && (enabled = presets[p]))"
      />
    </section>

    <h3 class="mt-10 text-2xl text-black dark:text-white">
      SponsorBlock Options
    </h3>

    <section x-data="{ sponsorblockBehaviour: null }">
      <section x-data="{ presets: { default: 'disabled', media_center: 'disabled', audio: 'disabled', archiving: 'disabled' } }">
        <.input
          field={f[:sponsorblock_behaviour]}
          options={friendly_sponsorblock_options()}
          type="select"
          label="SponsorBlock Behaviour"
          help="Action to take when SponsorBlock segments are found. 'Disabled' won't take any action"
          x-model="sponsorblockBehaviour"
          x-init="
            sponsorblockBehaviour = $el.value
            $watch('selectedPreset', p => p && ($el.value = presets[p]))
          "
        />
      </section>

      <section x-show="sponsorblockBehaviour !== 'disabled'" x-transition>
        <.input
          field={f[:sponsorblock_categories]}
          options={frieldly_sponsorblock_categories()}
          type="checkbox_group"
          label="SponsorBlock Categories"
        />
      </section>
    </section>

    <.button class="my-10 sm:mb-7.5 w-full sm:w-auto" rounding="rounded-lg">Save Media profile</.button>
  </section>

  <div class="rounded-sm dark:bg-meta-4 p-4 md:p-6 mb-5">
    <.output_template_help />
  </div>
</.simple_form>
